<template>
	<view>
		<view class="top">
			<u-navbar title-color="#fff" :borderBottom="false" titleColor="#000000" title="" back-icon-color="#000000"
				:background="background"></u-navbar>
			<image class="top_bg1" src="../static/tlb.png"></image>
			<view class="top_bg2">
				<view class="icon"></view>
				<view class="time">
					本期:{{info.begin}}-{{info.end}}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box">
				<view class="title">
					<image src="../static/a1.png" mode=""></image>
					<view class="name">
						活动规则
					</view>
				</view>
				<view class="text" v-if="info.kmb_status=='1'&&info.gdb_ticket=='0'">
					活动期间邀请好友并成功抢拍 <text class="t1">严选新生鲜</text> 蜂巢，您则可获得 <text class="t2">50 <text class="t3">蜜贝</text>
					</text></text>
				</view>
				<view class="text" v-if="info.gdb_ticket=='1'&&info.kmb_status=='0'">
					活动期间邀请好友并成功抢拍 <text class="t1">严选新生鲜</text> 蜂巢，您则可获得 <text class="t2">
						1<text class="t3">张优选日用品金蜜券</text></text>
				</view>
				<view class="text" v-if="info.gdb_ticket=='1'&&info.kmb_status=='1'">
					活动期间邀请好友并成功抢拍 <text class="t1">严选新生鲜</text> 蜂巢，您则可获得 <text class="t2">50 <text class="t3">蜜贝</text>
					</text>或 <text class="t2">1<text class="t3">张 优选日用品金蜜券</text></text>
				</view>
			</view>
			<view class="box" style="margin-top: 50rpx;">
				<view class="title">
					<image src="../static/a2.png" mode=""></image>
					<view class="name">
						好友列表
					</view>
				</view>
				<view v-if="list.length>0">
					<u-row>
						<u-col :span="6" v-for="(item,index) in list" :key="index">
							<view class="list">
								<u-avatar class="head" size="128" :src="getHead(item.head_img)"></u-avatar>
								<view class="name">
									{{item.nickname}}
								</view>
								<view class="button" v-if="item.give_status==0">
									<view class="b2">
										未达成
									</view>
								</view>
								<view class="button" v-else-if="item.give_status==1"></view>
								<view class="button" v-else>
									<view class="b1" @click="receivekmb(item.son_uid,index,1)"
										v-if="item.kmb_status==1||item.kmb_status=='1'">
										领取蜜贝
									</view>
									<view class="b3" @click="receivekmb(item.son_uid,index,2)"
										v-if="item.gdb_ticket==1||item.gdb_ticket=='1'">
										领取金蜜券
									</view>
								</view>
								<image v-if="item.give_status==1" src="../static/a3.png" class="img"></image>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="node" v-else>
					<view class="up">
						<image src="../static/r15.png" class="left"></image>
						<view class="right">
							<view class="name">
								您还未邀请好友
							</view>
							<view class="text">
								快去邀请好友领取奖励吧
							</view>
						</view>
					</view>
					<view class="down">
						<view class="button" @click="toPage('/pages/htmlC/invitation/index')">
							去邀请
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="div"></view>
		<view class="bottom" v-if="list.length>=0">
			<view class="text">
				<image src="../static/mtk_bg2.png" mode=""></image> <text class="text1">成功邀请好友</text><text
					class="text2">{{info.alredy_count}}</text><text class="text1">人</text>
			</view>
			<view class="button" @click="toPage('/pages/htmlC/invitation/poster')">
				分享得 <text>50</text> 蜜贝
			</view>
		</view>
		<u-popup v-model="show" close-icon-pos="top-left" :closeable="true" borderRadius="10" mode="bottom">
			<view class="harvest">
				<view class="_view">
					<view class="title">
						选择礼品
					</view>
				</view>
				<view class="_view" v-if="radio==1" style="padding: 50rpx;line-height: 1.5;">
					领取蜜贝奖励 <text>50</text>
				</view>
				<view class="_view" v-if="radio==2" style="padding: 50rpx;line-height: 1.5;">
					领取 <text>1张</text>金蜜券奖励
				</view>
				<button type="default" class="button2" @click="toreceivekmb">确认提交</button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				info: {},
				list: [],
				page: 1,
				son_uid: 0,
				index: 0,
				show: false,
				radio: "1",
				radioList: [{
						name: '1',
						checked: true,
						disabled: false,
						img: '../static/mtk_bg2.png',
						text: '蜜贝'
					},
					{
						name: '2',
						checked: false,
						disabled: false,
						img: '../static/mtk_bg2x.png',
						text: '优选日用品金蜜券'
					}
				],
			}
		},
		onLoad(option) {
			than = this;
			than.post("api/Gashapon/lowerMemberList", null, function(data) {
				data.begin = data.begin.replace(/-/g, '.')
				data.end = data.end.replace(/-/g, '.')
				than.info = data;
			})
			than.getList();
		},
		onReachBottom() {
			than.page++;
			than.getList();
		},
		methods: {
			radioGroupChange(e) {
				this.model.payType = e;
			},
			getList() {
				than.post("api/Gashapon/lowerMemberList", {
					page: than.page
				}, function(data) {
					if (than.page == 1) {
						than.list = data.list;
					} else {
						than.list = than.list.concat(data.list);
					}
				})
			},
			receivekmb(son_uid, index, radio) {
				than.son_uid = son_uid;
				than.index = index;
				than.radio = radio;
				than.show = true;
			},
			toreceivekmb() {
				than.post("api/Gashapon/receivekmb", {
					son_uid: than.son_uid,
					gift_type: than.radio
				}, function(data) {
					than.show = false;
					than.list[than.index].give_status = 1;
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FAFAFA;
	}

	.div {
		width: 100%;
		height: 100rpx;
	}

	.u-radio-group {
		display: block !important;
	}

	.harvest {
		text-align: center;


		.popup_top {
			height: 30rpx;
		}

		.img {
			overflow: hidden;
			padding: 0 55rpx;
			margin-top: 44rpx;

			.left {
				float: left;

				image {
					width: 27rpx;
					height: 27rpx;
				}
			}

			.right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;

				text {
					color: #004FFF;
				}
			}

		}

		.view {
			.list {
				text-align: center;

				image {
					width: 119rpx;
					height: 119rpx;
				}

				.number {
					font-size: 48rpx;

					text {
						font-size: 28rpx;
					}

					font-family: PingFang SC;
					font-weight: bold;
					color: #FF5B00;
				}
			}
		}

		._view {
			background: #FFFFFF;
			margin: 0 30rpx;
			padding-bottom: 1rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

			text {
				color: #004FFF;
			}

			.title {
				height: 111rpx;
				line-height: 111rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;

				text {
					color: #004FFF;
				}

			}


		}


		.button2 {
			margin: 20rpx auto 0;
			color: #FFFFFF;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 74rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

	}

	.node {
		width: 678rpx;
		height: 330rpx;
		background: #F1F8FD;
		border-radius: 20rpx;
		padding: 0 23rpx;

		.up {
			display: flex;
			align-items: center;
			height: 241rpx;

			.left {
				width: 193rpx;
				height: 193rpx;
			}

			.right {
				margin-left: 23rpx;

				.name {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF2D01;
				}

				.text {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}

		.down {
			display: flex;
			align-items: center;
			height: 89rpx;

			.button {
				margin-left: auto;
				width: 120rpx;
				height: 48rpx;
				background: linear-gradient(89deg, #53AEF4, #6DD9FC);
				border-radius: 24rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.top {
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef H5 */
		padding-top: 60rpx;
		/* #endif */
		height: 526rpx;
		position: relative;
		background: #FFD100;
		background-size: 100% 100%;

		.top_bg1 {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.top_bg2 {
			position: absolute;
			left: 46rpx;
			display: flex;
			align-items: center;
			top: 250rpx;

			.icon {
				width: 24rpx;
				height: 24rpx;
				background: #FFD023;
				border-radius: 50%;
			}

			.time {
				padding-left: 22rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				background-image: url(../static/tlc.png);
				background-size: 100% 100%;
				height: 64rpx;
			}
		}
	}

	.content {
		position: relative;
		z-index: 1;
		border-radius: 70rpx 0 0rpx 0rpx;
		padding: 30rpx;
		margin-top: -190rpx;
		background-color: #FAFAFA;

		.list {
			width: 327rpx;
			height: 327rpx;
			background: #F1F8FD;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			text-align: center;
			position: relative;

			.img {
				position: absolute;
				width: 97rpx;
				height: 92rpx;
				bottom: 0;
				right: 0;
			}

			.head {
				margin-top: 34rpx;
			}

			.name {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin: 20rpx 0 30rpx;
			}

			.number {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF5B00;
			}

			.button {
				display: flex;
				align-items: center;
			}

			.b1 {
				padding: 0 14rpx;
				height: 48rpx;
				background: linear-gradient(89deg, #53AEF4, #6DD9FC);
				border-radius: 24rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
			}

			.b2 {
				padding: 0 14rpx;
				height: 48rpx;
				background: #B9B9B9;
				border-radius: 24rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
			}

			.b3 {
				padding: 0 14rpx;
				height: 48rpx;
				background: linear-gradient(89deg, #FC941E, #FFD96B);
				border-radius: 24rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
			}

		}

		.box {
			.title {
				position: relative;
				height: 100rpx;
				margin-top: 20rpx;

				image {
					position: absolute;
					width: 61rpx;
					height: 51rpx;
				}

				.name {
					top: 25rpx;
					position: absolute;
					z-index: 1;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #283654;
				}
			}

			.text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #72808F;
				line-height: 45rpx;

				.t1 {
					color: #FF5B00;
				}

				.t2 {
					margin: 0 10rpx;
					font-size: 48rpx;
					font-family: DIN;
					font-weight: bold;
					color: #FF2D01;

					.t3 {
						margin-left: 10rpx;
						font-size: 24rpx;
					}
				}
			}
		}

	}



	.bottom {
		position: fixed;
		z-index: 3;
		left: 0;
		right: 0;
		bottom: 0rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		background-color: white;
		padding: 0rpx 40rpx;


		.button {
			border-radius: 20rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				margin: -10rpx 5rpx 0;
				font-size: 48rpx;
				font-family: DIN;
				font-weight: bold;
				color: #FEFEFE;
			}

			text-align: center;
			padding: 0 15rpx;
			height: 79rpx;
			background: #FF2D01;
			margin-left: auto;
		}

		.color_hui {
			background: #999999;
		}

		.text {
			font-size: 30rpx;
			display: flex;
			align-items: center;

			image {
				width: 75rpx;
				margin-right: 26rpx;
				height: 75rpx;
			}

			.text1 {
				color: #D3830D;
				font-weight: bold;
				margin-right: 15rpx;
			}

			.text2 {
				color: #FF2D01;
				font-weight: bold;
			}
		}

	}
</style>
